<template>
	<view class="main">
		<tou_hand1 handtitle='设备异常统计'></tou_hand1>
		<!-- <van-notice-bar :scrollable="true">
			温馨提示：异常数据分析的是最近7天的消费订单，表示设备在7天范围内的异常订单情况，仅供运营参考。
		</van-notice-bar> -->
		<uni-notice-bar scrollable="true" single="true" text="温馨提示：异常数据分析的是最近7天的消费订单，表示设备在7天范围内的异常订单情况，仅供运营参考。 异常：2~4次、严重异常：4~6次、极端异常：6次以上。"></uni-notice-bar>
		<view class="show">
			
			<view class="sone">
				<input v-model="sbno" placeholder='设备号' />
				<input v-model="xqname" placeholder='小区名' />
				<view class="sonebtn" @click="quebtn">查询</view>
				<view class="sonebtn" @click="czbtn">重置</view>
			</view>
			<view class="stwo">
				<view class="stwofirst" v-for="(item, index) in showlist" :key="index">
					<view class="sfleft">
						<view class="sfxia">
							<view class="sfxiatwo">设备号：</view>
							<view class="sfxiathree">{{item.code}}</view> 
						</view>
						<view class="sfxia">
							<view class="sfxiatwo">所属小区：</view>
							<view class="sfxiathree ">{{item.projectName}}</view> 
						</view>
						<view class="sfxia">
							<view class="sfxiatwo">所属充电区：</view>
							<view class="sfxiathree">{{item.areaName}}</view> 
						</view>
						<view class="sfxia">
							<view class="sfxiatwo">异常状态：</view>
							<view class='sfxiaone color2' v-if="item.abnormalNumStr==1" @click="ycbrtn(item.code)">异常</view>
							<view class='sfxiaone color1' v-if="item.abnormalNumStr==2" @click="ycbrtn(item.code)">严重异常</view>
							<view class='sfxiaone color' v-if="item.abnormalNumStr==3" @click="ycbrtn(item.code)">极端异常</view>
						</view>
						<view class="sfxia">
							<view class="sfxiatwo">异常次数：</view>
							<view class="sfxiathree">{{item.abnormalNum}}</view> 
						</view>
					</view>
					<view class="sfright">
						<view class="sfrightone" @click="gobtn(item.code,item.projectName,item.areaName)">详细</view>
						<view class="sfrighttwo" @click="chabtn(item.code,item.projectName)">查看小区所有</view>
					</view>
				</view>
			</view>
			
			

		</view>
		<van-popup :show="tishishow">
			<view class="tchuang">
				<view class="tcone" v-for="(item, index) in yclist" :key="index">
					<view class="tconeleft">{{item.typesStr}}</view>：
					<view class="tconeright">{{item.num}}</view>次
				</view>
				<view class="tcbtn" @click="closebtn">关闭</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'

	export default {
		components: {
			tou_hand1
		},
		mounted() {

		},

		data() {
			return {
				sbno: '', //设备编号
				xqname: '', //小区名
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
				showlist:[],//列表数据
				tishishow:false,
				yclist:[],
			}
		},
		onLoad(option) {
			this.showlist = [];
			this.onRefresh();
		},


		onShow() {
			
	
		},
		methods: {
			//跳转详情
			gobtn(code,projectName,areaName){
				uni.navigateTo({
					url: '../equipment_abnormality_detail/equipment_abnormality_detail?code='+code+'&projectName='+projectName+'&areaName='+areaName
				})
			},
			chabtn(code,projectName){
				this.xqname=projectName
				this.showlist = [];
				this.onRefresh();
			},
			czbtn(){
				this.xqname=''
				this.showlist = [];
				this.onRefresh();
			},
			quebtn(){
				this.showlist = [];
				this.onRefresh();
			},
			// 获取设备异常统计列表
			loadMore() {
				if (this.refreshing) {
				  this.showlist = [];
				  this.refreshing = false;
				}
				const that = this;
				let data = {
					pageNum:that.pageNum,
					pageSize:that.pageSize,
					code:this.sbno,
					projectName:this.xqname
				}
				that.loading = true;
				that.$base.request1('manager/statistic/deviceAbnormal/list', 'GET', data)
					.then(res => {
						that.loading = false;
						if(res.data.rows&&res.data.rows.length>0){
							that.showlist = that.showlist.concat(res.data.rows);
							that.pageNum += 1;
							
						}else{
							that.finished = true;
						}
					})
					.catch(err => {
				
					})
			},
			 onRefresh() {
				  // 清空列表数据
				  this.finished = false;
				  this.pageNum=1
				  // 重新加载数据
				  // 将 loading 设置为 true，表示处于加载状态
				  this.loading = true;
				  this.loadMore();
			},
			//异常统计
			ycbrtn(code){
				let data = {
					code:code,
				}
				
				this.$base.request1('manager/statistic/getAbnormalTypes', 'GET', data)
					.then(res => {
						if(res.data.code==200){
							this.yclist=res.data.data
							this.tishishow=true
							console.log(1111)
						}else{
							this.$toast.fail(res.data.msg)
							return
						}
					})
					.catch(err => {
				
					})
			},
			closebtn(){
				this.tishishow=false
			}

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		.show {
			width: 100%;
			padding-bottom: 80upx;
			overflow: hidden;
			/deep/.van-list__finished-text{
				margin-top: 100upx !important;
				padding-bottom: 200upx !important;
			}
			/deep/.van-hairline--top-bottom::after{
				border-width: 0 !important;
			}
			.sone {
				// width: 650upx;
				box-sizing: border-box;
				align-items: center;
				margin: 32upx 25upx;
				display: flex;
				justify-content: space-between;

				input {
					width: 200upx;
					height: 64upx;
					border: 2upx solid #b0b0b0;
					border-radius: 10upx;
					align-items: center;
					text-align: center;
					padding: 10upx 20upx;
					box-sizing: border-box;
				}

				.sonebtn {
					width: 120upx;
					background-color: #4B98ED;
					color: #FFFFFF;
					text-align: center;
					padding: 15upx 0;
					box-sizing: border-box;
					border-radius: 10upx;
				}
			}

			.stwo {
				width: 100%;
				box-sizing: border-box;

				.stwofirst {
					width: 686upx;
					border-radius: 16upx;
					box-shadow: 0upx 4upx 9upx 0upx rgba(44, 44, 44, 0.21);
					margin: 15upx auto;
					display: flex;
					justify-content: space-between;
					padding: 29upx 24upx;
					box-sizing: border-box;
					align-items: center;

					.sfleft {
						.sfxia {
							display: flex;
							align-items: center;
							margin: 10upx 0;
							.sfxiatwo{
								font-size: 26upx;
								color: #181818;
								font-family: PingFang SC Medium, PingFang SC Medium-Medium;
								font-weight: 700;
							}
							.sfxiathree{
								font-size: 24upx;
								color: #666666;
								font-family: PingFang SC Medium, PingFang SC Medium-Medium;
								font-weight: 500;
								width: 250upx;
								white-space:nowrap;
								overflow:hidden;
								text-overflow:ellipsis;
							}
							
							.sfxiaone{
								width: 160upx;
								font-size: 24upx;
								text-align: center;
								border-radius: 10upx;
								padding: 12upx 0;
								box-sizing: border-box;
								color: #FFFFFF;
							}
							.color{
								background-color: #f44336;
							}
							.color1{
								background-color:#ff33ff ;
							}
							.color2{
								background-color:#ff9933 ;
							}
						}
					}

					.sfright {
						font-size: 26upx;
						.sfrightone{
							width: 140upx;
							background-color: #169bd5;
							color: #FFFFFF;
							padding: 10upx 0;
							border-radius: 10upx;
							text-align: center;
							
						}
						.sfrighttwo{
							width: 210upx;
							background-color: #0066ff;
							padding: 10upx 0;
							color: #FFFFFF;
							border-radius: 10upx;
							text-align: center;
							margin-top: 15upx;
						}
					}
				}

			}

		}
		.tchuang{
			width: 500upx;
			height: 500upx;
			padding: 12upx 10upx;
			box-sizing: border-box;
			padding-top: 50upx;
			position: relative;
			.tcone{
				display: flex;
				text-align: center;
				align-items: center;
				color: #808080;
				justify-content: center;
				margin-top: 20upx;
				.tconeright{
					color: red;
				}
				
			}
			.tcbtn{
				width: 150upx;
				background-color:red ;
				color: #FFFFFF;
				text-align: center;
				padding: 15upx 0;
				border-radius: 15upx;
				position: absolute;
				margin: 0 auto;
				left: 0upx;
				right: 0upx;
				bottom: 20upx;
			}
		}
		.van-popup--center{
			border-radius: 20upx;
		}
	}
</style>
